<template>
	<view class="find-container">
		<!-- 头部区域 -->
		<view class="head">
			<view class="head_icon" @click="clickLeft">
				<u-icon name="list" size="30"></u-icon>
			</view>
			<view class="head_center">
				<u--input placeholder="搜索" shape="circle" prefixIcon="search"
					prefixIconStyle="font-size: 22px;color: #909399">
				</u--input>
			</view>
			<view class="head_icon">
				<u-icon name="mic" size="30"></u-icon>
			</view>
		</view>
		<u-popup :show="show" mode="left">
			<view class="container">
				<LeftIcon></LeftIcon>
			</view>
		</u-popup>
		<!-- 轮播图区域 -->
		<view class="banner">
			<u-swiper :list="list" indicator circular height="150"></u-swiper>
		</view>
		<!-- 导航区域 -->
		<!-- 推荐歌单 -->
		<LeftIcon></LeftIcon>

	</view>
</template>

<script>
	import LeftIcon from './left-icon.vue'
	export default {
		components: {
			LeftIcon
		},
		data() {
			return {
				list: [
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				],
				show: false
			}
		},
		methods: {
			clickLeft() {
				console.log(222)
				this.show = true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.find-container {
		padding: 20rpx;

		// 头部区域样式
		.head {
			height: 80rpx;
			padding: 20rpx 0;
			display: flex;
			align-items: center;

			// 左边图标
			.head_icon {
				width: 50rpx;
				height: 50rpx;
				line-height: 50rpx;
			}

			.head_center {
				flex: 1;
				margin: 0 30rpx;
			}

		}
		.container{
			background-color: #eee;
		}
	}
</style>
